<template>
  <div class="scenic-recommendation-container">
    <div class="map-container" ref="mapContainer"></div>

    <!-- Control Panel -->
    <div class="control-panel" id="tools-container">
      <h3 class="panel-title">景点推荐</h3>
      <p class="panel-description">为您推荐103省道沿线精品景点</p>

      <!-- 推荐类型选择 -->
      <div class="recommendation-type">
        <label class="type-label">推荐类型：</label>
        <el-radio-group v-model="recommendationType" @change="handleRecommendationTypeChange">
          <el-radio label="popular">热门景点</el-radio>
        </el-radio-group>
      </div>

      <!-- 获取推荐按钮 -->
      <div class="action-buttons">
        <el-button
          type="primary"
          @click="getRecommendations"
          :loading="isLoading"
          class="recommend-button"
        >
          <el-icon><Star /></el-icon> 获取推荐
        </el-button>
      </div>
    </div>

    <!-- 推荐结果面板 -->
    <el-card
      v-if="showRecommendations && recommendations.length > 0"
      class="recommendations-panel"
      :body-style="{ padding: '15px' }"
    >
      <template #header>
        <div class="recommendations-header">
          <span>{{ getRecommendationTitle() }}</span>
          <el-button
            type="danger"
            size="small"
            @click="showRecommendations = false"
            class="close-button"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>

      <el-scrollbar height="400px">
        <div class="recommendations-list">
          <div
            v-for="(recommendation, index) in recommendations"
            :key="index"
            class="recommendation-item"
            @click="focusOnRecommendation(recommendation)"
          >
            <div class="recommendation-content">
              <div class="recommendation-header">
                <h4 class="recommendation-name">{{ recommendation.attributes.facilityname }}</h4>
              </div>
              <div class="recommendation-details">
                <p class="recommendation-type">
                  <el-icon><Location /></el-icon>
                  类型：{{ recommendation.attributes.facilitytype }}
                </p>
                <p v-if="recommendation.distance" class="recommendation-distance">
                  <el-icon><Position /></el-icon>
                  距离：{{ (recommendation.distance / 1000).toFixed(1) }}公里
                </p>
                <p
                  v-if="recommendation.attributes.FacilityIntroduction"
                  class="recommendation-intro"
                >
                  {{ recommendation.attributes.FacilityIntroduction.substring(0, 100) }}...
                </p>
              </div>
              <div class="recommendation-actions">
                <el-button type="primary" size="small" @click.stop="viewDetails(recommendation)">
                  查看详情
                </el-button>
                <el-button type="success" size="small" @click.stop="addToRoute(recommendation)">
                  加入路线
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-card>

    <!-- 路线规划面板 -->
    <el-card
      v-if="showRoutePanel && routePoints.length > 0"
      class="route-panel"
      :body-style="{ padding: '15px' }"
    >
      <template #header>
        <div class="route-header">
          <span>我的路线 ({{ routePoints.length }}个景点)</span>
          <div class="route-actions">
            <el-button type="primary" size="small" @click="startNavigation" :loading="isNavigating">
              <el-icon><Navigation /></el-icon> 开始导航
            </el-button>
            <el-button type="warning" size="small" @click="optimizeRoute" :loading="isOptimizing">
              <el-icon><Sort /></el-icon> 优化路线
            </el-button>
            <el-button type="danger" size="small" @click="clearRoute">
              <el-icon><Delete /></el-icon> 清空
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="showRoutePanel = false"
              class="close-button"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>
      </template>

      <el-scrollbar height="200px">
        <div class="route-list">
          <div v-for="(point, index) in routePoints" :key="index" class="route-item">
            <div class="route-number">{{ index + 1 }}</div>
            <div class="route-content">
              <div class="route-name">{{ point.attributes.facilityname }}</div>
              <div class="route-type">{{ point.attributes.facilitytype }}</div>
            </div>
            <el-button
              type="danger"
              size="small"
              @click="removeFromRoute(index)"
              class="remove-button"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>
      </el-scrollbar>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="selectedRecommendation?.attributes.facilityname || '景点详情'"
      width="600px"
      :modal="false"
    >
      <div v-if="selectedRecommendation" class="detail-content">
        <div class="detail-image" v-if="selectedRecommendation.attributes.FacilityImage">
          <img
            :src="selectedRecommendation.attributes.FacilityImage"
            class="facility-image"
            @click="previewImage(selectedRecommendation.attributes.FacilityImage)"
          />
        </div>
        <div class="detail-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="景点名称">
              {{ selectedRecommendation.attributes.facilityname }}
            </el-descriptions-item>
            <el-descriptions-item label="景点类型">
              {{ selectedRecommendation.attributes.facilitytype }}
            </el-descriptions-item>

            <el-descriptions-item label="景点介绍" span="2">
              <div class="introduction-text">
                {{ selectedRecommendation.attributes.FacilityIntroduction || '暂无介绍' }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="imagePreviewVisible" title="图片预览" width="80%" :modal="false">
      <div class="image-preview">
        <img :src="previewImageUrl" class="preview-image" />
      </div>
    </el-dialog>

    <!-- 导航起点选择对话框 -->
    <el-dialog v-model="showNavigationDialog" title="选择导航起点" width="500px" :modal="false">
      <div class="navigation-dialog">
        <p class="dialog-description">
          请输入您的起点位置，我们将为您规划到路线中各个景点的导航路径。
        </p>
        <el-form>
          <el-form-item label="起点位置：">
            <el-input
              v-model="startLocation"
              placeholder="请输入起点地址或坐标（如：117.14,36.29）"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirmNavigation" :loading="isNavigating">
              开始导航
            </el-button>
            <el-button @click="useCurrentLocation" :disabled="isNavigating">
              使用当前位置
            </el-button>
            <el-button
              type="success"
              @click="startPickingLocation"
              :disabled="isNavigating"
              :loading="isPickingLocation"
            >
              {{ isPickingLocation ? '请在地图上点击选择位置' : '在地图上选择' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 导航步骤面板 -->
    <el-card
      v-if="showNavigationSteps && navigationSteps.length > 0"
      class="navigation-panel"
      :body-style="{ padding: '15px' }"
    >
      <template #header>
        <div class="navigation-header">
          <span>导航路径 ({{ navigationSteps.length }}步)</span>
          <el-button
            type="danger"
            size="small"
            @click="showNavigationSteps = false"
            class="close-button"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>

      <el-scrollbar height="300px">
        <div class="navigation-steps">
          <div v-for="(step, index) in navigationSteps" :key="index" class="navigation-step">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <div class="step-instruction">{{ step.instruction }}</div>
              <div class="step-distance">{{ step.distance }}米 - {{ step.duration }}秒</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Star,
  View,
  Close,
  Location,
  Position,
  Sort,
  Delete,
  Notification,
} from '@element-plus/icons-vue'
import Graphic from '@arcgis/core/Graphic'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import Query from '@arcgis/core/rest/support/Query.js'
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'
import Point from '@arcgis/core/geometry/Point'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import { facilityPointSymbol, scenicPointSymbol, viewScenicSpotSymbol } from '@/utils/facilityIcons'
import { getGaoDeRoute, type Step } from '@/utils/gaodeAPI'

const mapContainer = ref<HTMLDivElement>()

// 推荐相关状态
const recommendationType = ref('popular')
const searchRadius = ref(5000)
const isLoading = ref(false)
const isOptimizing = ref(false)
const recommendations = ref<any[]>([])
const showRecommendations = ref(false)
const routePoints = ref<any[]>([])
const showRoutePanel = ref(false)

// 对话框状态
const detailDialogVisible = ref(false)
const selectedRecommendation = ref<any>(null)
const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')

// 导航相关状态
const showNavigationDialog = ref(false)
const startLocation = ref('')
const isNavigating = ref(false)
const navigationSteps = ref<Step[]>([])
const showNavigationSteps = ref(false)
const isPickingLocation = ref(false)

// 地图相关 - 使用普通变量避免响应式包装
let view: MapView
let facilityLayer: FeatureLayer
let roadLayer: FeatureLayer
let highlightLayer: GraphicsLayer
let routeLayer: GraphicsLayer
let startPointLayer: GraphicsLayer
let userLocation: Point | null = null
let map: Map

// 创建道路符号
const roadSymbol = new SimpleLineSymbol({
  color: [0, 122, 194, 0.8],
  width: 4,
  style: 'solid',
  cap: 'round',
  join: 'round',
})

// 创建路线符号
const routeSymbol = new SimpleLineSymbol({
  color: [255, 0, 0, 0.8],
  width: 3,
  style: 'solid',
  cap: 'round',
  join: 'round',
})

// 初始化地图
onMounted(() => {
  initializeMap()
})

function initializeMap() {
  // 创建设施图层
  facilityLayer = new FeatureLayer({
    url: 'https://services.arcgis.com/cxicHGWOCJwYXasp/arcgis/rest/services/Facility/FeatureServer/0',
    outFields: ['*'],
    renderer: {
      type: 'unique-value',
      field: 'facilitytype',
      defaultSymbol: facilityPointSymbol,
      uniqueValueInfos: [
        {
          value: '驿站',
          symbol: scenicPointSymbol,
        },
        {
          value: '景点',
          symbol: viewScenicSpotSymbol,
        },
        {
          value: '餐饮',
          symbol: facilityPointSymbol,
        },
      ],
    } as never,
  })

  // 创建道路图层
  roadLayer = new FeatureLayer({
    url: 'https://www.geosceneonline.cn/server/rest/services/Hosted/S103/FeatureServer/0',
    outFields: ['*'],
    renderer: {
      type: 'simple',
      symbol: roadSymbol,
    } as never,
  })

  // 创建高亮图层
  highlightLayer = new GraphicsLayer({
    title: '高亮图层',
  })

  // 创建路线图层
  routeLayer = new GraphicsLayer({
    title: '路线图层',
  })

  // 创建起点标记图层
  startPointLayer = new GraphicsLayer({
    title: '起点标记图层',
  })

  // 创建地图
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  // 添加图层到地图
  map.add(facilityLayer)
  map.add(roadLayer)
  map.add(highlightLayer)
  map.add(routeLayer)
  map.add(startPointLayer)

  // 创建地图视图
  view = new MapView({
    map: map,
    center: [117.14435714426122, 36.29746937366678],
    zoom: 10,
  })

  // 初始化地图视图容器
  view.container = mapContainer.value as HTMLDivElement
  view.ui.add('tools-container', 'top-right')

  // 添加地图点击事件监听
  view.on('click', handleMapClick)

  // 获取用户位置
  getUserLocation()
}

// 获取用户位置
function getUserLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        userLocation = new Point({
          longitude: position.coords.longitude,
          latitude: position.coords.latitude,
        })
      },
      (error) => {
        console.warn('无法获取用户位置:', error)
        // 使用默认位置（103省道中心点）
        userLocation = new Point({
          longitude: 117.14435714426122,
          latitude: 36.29746937366678,
        })
      },
    )
  } else {
    // 使用默认位置
    userLocation = new Point({
      longitude: 117.14435714426122,
      latitude: 36.29746937366678,
    })
  }
}

// 处理推荐类型变化
function handleRecommendationTypeChange() {
  recommendations.value = []
  showRecommendations.value = false
  clearHighlights()
}

// 获取推荐
async function getRecommendations() {
  isLoading.value = true
  try {
    await getPopularRecommendations()
    showRecommendations.value = true
  } catch (error) {
    console.error('获取推荐失败:', error)
    ElMessage.error('获取推荐失败，请稍后重试')
  } finally {
    isLoading.value = false
  }
}

// 获取热门景点推荐
async function getPopularRecommendations() {
  const query = new Query({
    where: "facilitytype = '景点'",
    outFields: ['*'],
    returnGeometry: true,
  })

  const result = await facilityLayer.queryFeatures(query)
  console.log('获取热门景点推荐', result)
  // 避免ArcGIS对象被响应式包装，只提取需要的数据
  const features = result.features.map((feature) => ({
    geometry: {
      longitude: (feature.geometry as Point).longitude,
      latitude: (feature.geometry as Point).latitude,
    },
    attributes: { ...feature.attributes },
  }))

  // 模拟推荐算法（基于名称长度、是否有介绍等因素）
  const processedFeatures = features.map((feature) => {
    return {
      geometry: feature.geometry,
      attributes: feature.attributes,
    }
  })

  // 取前8个景点
  recommendations.value = processedFeatures.slice(0, 8)

  highlightRecommendations()
}



// 高亮推荐景点
function highlightRecommendations() {
  clearHighlights()

  recommendations.value.forEach((recommendation) => {
    // 创建Point对象用于高亮显示
    const point = new Point({
      longitude: recommendation.geometry.longitude,
      latitude: recommendation.geometry.latitude,
    })
    const highlightGraphic = new Graphic({
      geometry: point,
      symbol: {
        type: 'simple-marker',
        color: [255, 255, 0, 0.8],
        size: '16px',
        outline: {
          color: [255, 0, 0],
          width: 2,
        },
      } as any,
    })

    highlightLayer.add(highlightGraphic)
  })
}

// 清除高亮
function clearHighlights() {
  highlightLayer.removeAll()
}

// 聚焦到推荐景点
function focusOnRecommendation(recommendation: any) {
  const geometry = recommendation.geometry
  const point = new Point({
    longitude: geometry.longitude,
    latitude: geometry.latitude,
  })
  view.goTo({
    target: point,
    zoom: 15,
  })
}

// 查看详情
function viewDetails(recommendation: any) {
  selectedRecommendation.value = recommendation
  detailDialogVisible.value = true
}

// 添加到路线
function addToRoute(recommendation: any) {
  const exists = routePoints.value.find(
    (point) => point.attributes.facilityname === recommendation.attributes.facilityname,
  )

  if (exists) {
    ElMessage.warning('该景点已在路线中')
    return
  }

  routePoints.value.push(recommendation)
  showRoutePanel.value = true
  drawRoute()
  ElMessage.success('已添加到路线')
}

// 从路线中移除
function removeFromRoute(index: number) {
  routePoints.value.splice(index, 1)
  drawRoute()

  if (routePoints.value.length === 0) {
    showRoutePanel.value = false
  }
}

// 清空路线
function clearRoute() {
  routePoints.value = []
  showRoutePanel.value = false
  routeLayer.removeAll()
}

// 优化路线
function optimizeRoute() {
  if (routePoints.value.length < 2) {
    ElMessage.warning('至少需要2个景点才能优化路线')
    return
  }

  isOptimizing.value = true

  // 简单的路线优化算法（最近邻）
  setTimeout(() => {
    const optimized = [routePoints.value[0]] // 从第一个点开始
    const remaining = [...routePoints.value.slice(1)]

    while (remaining.length > 0) {
      const current = optimized[optimized.length - 1]
      let nearestIndex = 0
      let nearestDistance = Infinity

      remaining.forEach((point, index) => {
        const currentPoint = new Point({
          longitude: current.geometry.longitude,
          latitude: current.geometry.latitude,
        })
        const targetPoint = new Point({
          longitude: point.geometry.longitude,
          latitude: point.geometry.latitude,
        })
        const distance = geometryEngine.distance(currentPoint, targetPoint, 'meters')
        if (distance < nearestDistance) {
          nearestDistance = distance
          nearestIndex = index
        }
      })

      optimized.push(remaining[nearestIndex])
      remaining.splice(nearestIndex, 1)
    }

    routePoints.value = optimized
    drawRoute()
    isOptimizing.value = false
    ElMessage.success('路线已优化')
  }, 1000)
}

// 绘制路线
function drawRoute() {
  routeLayer.removeAll()

  if (routePoints.value.length < 2) return

  const paths = []
  for (let i = 0; i < routePoints.value.length - 1; i++) {
    const start = routePoints.value[i].geometry
    const end = routePoints.value[i + 1].geometry
    paths.push([start.longitude, start.latitude])
    if (i === routePoints.value.length - 2) {
      paths.push([end.longitude, end.latitude])
    }
  }

  const routeLine = new Polyline({
    paths: [paths],
  })

  const routeGraphic = new Graphic({
    geometry: routeLine,
    symbol: routeSymbol,
  })

  routeLayer.add(routeGraphic)
}

// 获取推荐标题
function getRecommendationTitle() {
  return '热门景点推荐'
}

// 图片预览
function previewImage(imageUrl: string) {
  previewImageUrl.value = imageUrl
  imagePreviewVisible.value = true
}

// 开始导航
function startNavigation() {
  if (routePoints.value.length === 0) {
    ElMessage.warning('请先添加景点到路线中')
    return
  }
  ElMessage.info('只会导航到第一个景点')
  showNavigationDialog.value = true
}

// 开始在地图上选择位置
function startPickingLocation() {
  isPickingLocation.value = true
  ElMessage.info('请在地图上点击选择起点位置')
}

// 处理地图点击事件
function handleMapClick(event: any) {
  if (!isPickingLocation.value) {
    return
  }

  const { longitude, latitude } = event.mapPoint
  startLocation.value = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`

  // 清除之前的起点标记
  startPointLayer.removeAll()

  // 创建起点标记
  const startPoint = new Point({
    longitude: longitude,
    latitude: latitude
  })

  const startPointGraphic = new Graphic({
    geometry: startPoint,
    symbol: {
      type: 'simple-marker',
      color: [75, 192, 192, 0.8], // 清新的蓝绿色
      size: '20px',
      outline: {
        color: [255, 255, 255],
        width: 2
      }
    } as any
  })

  // 添加起点标记到图层
  startPointLayer.add(startPointGraphic)

  isPickingLocation.value = false
  ElMessage.success('已选择起点位置并添加标记')
}

// 使用当前位置
function useCurrentLocation() {
  if (userLocation) {
    startLocation.value = `${userLocation.longitude},${userLocation.latitude}`
  } else {
    ElMessage.warning('无法获取当前位置，请手动输入起点')
  }
}

// 确认导航
async function confirmNavigation() {
  if (!startLocation.value.trim()) {
    ElMessage.warning('请输入起点位置')
    return
  }

  if (routePoints.value.length === 0) {
    ElMessage.warning('请先添加景点到路线中')
    return
  }

  isNavigating.value = true
  try {
    // 获取第一个景点的导航路径
    // 获取起点和终点坐标
    const firstPoint = routePoints.value[0]
    const startGeometry = {
      longitude: startLocation.value.split(',')[0],
      latitude: startLocation.value.split(',')[1],
    }
    console.log(firstPoint)
    const endGeometry = {
      longitude: firstPoint.geometry.longitude,
      latitude: firstPoint.geometry.latitude,
    }

    // 调用高德地图API获取路线
    const startCoord = `${startGeometry.longitude},${startGeometry.latitude}`
    const endCoord = `${endGeometry.longitude},${endGeometry.latitude}`
    console.log(startCoord, endCoord)
    const routeResult = await getGaoDeRoute(startCoord, endCoord)
    if (routeResult.status === '1' && routeResult.route.paths.length > 0) {
      const path = routeResult.route.paths[0]
      navigationSteps.value = path.steps
      showNavigationSteps.value = true
      showNavigationDialog.value = false

      // 在地图上绘制导航路线
      drawNavigationRoute(path.steps)

      ElMessage.success(
        `导航路径已生成，共${path.steps.length}步，预计${Math.round(parseInt(path.duration) / 60)}分钟`,
      )
    } else {
      ElMessage.error('无法获取导航路径，请检查起点和终点')
    }
  } catch (error) {
    console.error('导航失败:', error)
    ElMessage.error('导航失败，请稍后重试')
  } finally {
    isNavigating.value = false
  }
}

// 绘制导航路线
function drawNavigationRoute(steps: Step[]) {
  // 清除之前的路线
  routeLayer.removeAll()

  // 解析所有步骤的polyline并绘制
  const allPaths: number[][] = []

  steps.forEach((step) => {
    if (step.polyline) {
      // 解析高德地图的polyline格式
      const coordinates = step.polyline.split(';').map((coord) => {
        const [lng, lat] = coord.split(',')
        return [parseFloat(lng), parseFloat(lat)]
      })
      allPaths.push(...coordinates)
    }
  })

  if (allPaths.length > 0) {
    const navigationLine = new Polyline({
      paths: [allPaths],
    })

    const navigationSymbol = new SimpleLineSymbol({
      color: [255, 0, 0, 0.8],
      width: 4,
      style: 'solid',
    })

    const navigationGraphic = new Graphic({
      geometry: navigationLine,
      symbol: navigationSymbol,
    })

    routeLayer.add(navigationGraphic)
  }
}
</script>

<style scoped>
.scenic-recommendation-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-container {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1000;
}

.panel-title {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.panel-description {
  margin: 0 0 20px 0;
  color: #606266;
  font-size: 14px;
}

.recommendation-type {
  margin-bottom: 15px;
}

.type-label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.distance-filter {
  margin-bottom: 15px;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.recommend-button,
.show-all-button {
  flex: 1;
}

.recommendations-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  max-height: 500px;
  z-index: 1000;
}

.recommendations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-button {
  padding: 4px 8px;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommendation-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.recommendation-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.recommendation-content {
  width: 100%;
}

.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.recommendation-name {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.recommendation-details {
  margin-bottom: 15px;
}

.recommendation-type,
.recommendation-distance {
  display: flex;
  align-items: center;
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.recommendation-type .el-icon,
.recommendation-distance .el-icon {
  margin-right: 5px;
}

.recommendation-intro {
  margin: 10px 0 0 0;
  color: #909399;
  font-size: 13px;
  line-height: 1.4;
}

.recommendation-actions {
  display: flex;
  gap: 10px;
}

.route-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 400px;
  max-height: 300px;
  z-index: 1000;
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-actions {
  display: flex;
  gap: 5px;
}

.route-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: #fafafa;
}

.route-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
}

.route-content {
  flex: 1;
}

.route-name {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.route-type {
  color: #909399;
  font-size: 12px;
}

.remove-button {
  padding: 4px 8px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-image {
  text-align: center;
}

.facility-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.facility-image:hover {
  transform: scale(1.05);
}

.introduction-text {
  line-height: 1.6;
  color: #606266;
}

.image-preview {
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

/* 导航相关样式 */
.navigation-dialog {
  padding: 10px 0;
}

.dialog-description {
  margin-bottom: 20px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.navigation-panel {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 350px;
  max-height: 400px;
  z-index: 1000;
}

.navigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.navigation-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.navigation-step {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-instruction {
  color: #303133;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.step-distance {
  color: #909399;
  font-size: 12px;
}

.route-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.route-actions .el-button {
  margin: 0;
}
</style>
